<!--  -->
<template>
  <div class="user-work-wrap">
    <!-- 顶部导航栏-->
    <van-sticky>
      <van-nav-bar title="作业列表"
                   left-text="返回"
                   left-arrow
                   @click-left="onClickLeft">
        <template #left>
          <van-icon class="my-icon"
                    name="arrow-left"
                    size="18" />
        </template>
      </van-nav-bar>
      <van-dropdown-menu overlay="true">
        <van-dropdown-item v-model="state.value1"
                           :options="option1" />
        <van-dropdown-item v-model="state.value2"
                           :options="option2" />
      </van-dropdown-menu>
    </van-sticky>
    <!-- 作业列表-->
    <div class="workList">
      <van-collapse v-model="activeNames">
        <van-collapse-item v-for="item in data.workList"
                           :key="item"
                           :title="item.courseName"
                           name="1">
          <template #icon>
            <van-icon name="todo-list"
                      size="20"
                      color="#87d4eb" />
          </template>
          <van-cell v-for="childrenitem in item.courseWorkList"
                    :key="childrenitem"
                    :title="childrenitem.workName"
                    :label="childrenitem.releaseTime + '~' + childrenitem.deadLine"
                    :value="childrenitem.state"
                    is-link
                    :to="childrenitem.derectTo">
            <template #icon>
              <van-icon name="circle"
                        size="18"
                        color="#fdb532" />
            </template>
          </van-cell>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
import { reactive, getCurrentInstance, ref } from 'vue'
export default {
  setup () {
    const { ctx, proxy } = getCurrentInstance()
    const state = reactive({
      value1: 0,
      value2: 'a'
    })
    const activeNames = ref(['0'])
    const data = reactive({
      workList: [
        {
          courseName: '海底探索',
          courseWorkList: [
            {
              workName: '谈谈你最喜欢的一种鱼？',
              releaseTime: '2021/6/1',
              deadLine: '2021/9/1',
              derectTo: '/Course/WorkInfoIng',
              state: '未完成'
            },
            {
              workName: '谈到海洋你会想到什么？',
              releaseTime: '2021/6/1',
              deadLine: '2021/9/1',
              derectTo: '/Course/WorkInfoDone',
              state: '已完成'
            }
          ]
        }
      ]
    })
    const option1 = [
      { text: '全部作业', value: 0 },
      { text: '进行中', value: 1 },
      { text: '已完成', value: 2 },
      { text: '未完成', value: 3 }
    ]
    const option2 = [
      { text: '默认排序', value: 'a' },
      { text: '时间排序', value: 'b' }
    ]
    function onClickLeft () {
      window.history.length > 1
        ? proxy.$router.go(-1)
        : proxy.$router.push('/search')
    }
    return {
      state,
      onClickLeft,
      data,
      option1,
      option2,
      activeNames
    }
  }
}
</script>
<style lang='scss' scoped>
.workList {
  margin: 20px $margin-horizon;
  background-color: $theme-color3;
  border-radius: $border-radius;
  overflow: hidden;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);
}
</style>
